<template>
  <div class="dinnerConfig">
    <cus-card title="就餐配置" >
      <cus-card title="交伙标准配置">
        <Table border :loading="form.loading" :columns="columns1" :data="data1">
          <template slot-scope="{ row }" slot="columns2">
            <div
              v-for="(v, i) in row.columns2"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns2.length - 1 }"
            >
              {{ v }}
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns3">
            <div
              v-for="(v, i) in row.columns3"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns3.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :active-change="false"
                :precision="2"
                :min="0"
                :max="99999"
                v-model="data1[index].columns3[i]"
                placeholder="交伙标准"
                @on-change="onChange1"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns4">
            <div
              v-for="(v, i) in row.columns3"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns4.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :active-change="false"
                :precision="2"
                :min="0"
                :max="99999"
                v-model="data1[index].columns4[i]"
                placeholder="军粮差价补贴"
                @on-change="onChange1"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns5">
            <div
              v-for="(v, i) in row.columns5"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns5.length - 1 }"
            >
              {{ v }}
            </div>
          </template>
        </Table>
      </cus-card>
      <cus-card title="退伙标准配置">
        <Table border :loading="form.loading" :columns="columns2" :data="data2">
          <template slot-scope="{ row }" slot="columns2">
            <div
              v-for="(v, i) in row.columns2"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns2.length - 1 }"
            >
              {{ v }}
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns3">
            <div
              v-for="(v, i) in row.columns3"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns3.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :precision="2"
                :active-change="false"
                :min="0"
                :max="99999"
                v-model="data2[index].columns3[i]"
                placeholder="交伙标准"
                @on-change="onChange2"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns4">
            <div
              v-for="(v, i) in row.columns4"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns4.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :precision="2"
                :active-change="false"
                :min="0"
                :max="99999"
                v-model="data2[index].columns4[i]"
                placeholder="军粮差价补贴"
                @on-change="onChange2"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns5">
            <div
              v-for="(v, i) in row.columns5"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns5.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :precision="2"
                :active-change="false"
                :min="0"
                :max="99999"
                v-model="data2[index].columns5[i]"
                placeholder="伤病员专项标准"
                @on-change="onChange2"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns6">
            <div
              v-for="(v, i) in row.columns6"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns6.length - 1 }"
            >
              {{ v }}
            </div>
          </template>
        </Table>
      </cus-card>
      <cus-card title="客饭标准配置">
        <Table border :loading="form.loading" :columns="columns3" :data="data3">
          <template slot-scope="{ row }" slot="columns2">
            <div
              v-for="(v, i) in row.columns2"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns2.length - 1 }"
            >
              {{ v }}
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns3">
            <div
              v-for="(v, i) in row.columns3"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns3.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :precision="2"
                :active-change="false"
                :min="0"
                :max="99999"
                v-model="data3[index]['columns3'][i]"
                placeholder="交伙标准"
                @on-change="onChange3"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns4">
            <div
              v-for="(v, i) in row.columns4"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns4.length - 1 }"
            >
              <InputNumber
                style="width: 50%;"
                size="large"
                :precision="2"
                :active-change="false"
                :min="0"
                :max="99999"
                v-model="data3[index]['columns4'][i]"
                placeholder="过节补贴标准"
                @on-change="onChange3"
              ></InputNumber>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns5">
            <div
              v-for="(v, i) in row.columns5"
              class="dinnerConfig-cell"
              :key="i"
              style="padding: 0 20px"
              :class="{ borderBottom: i != row.columns5.length - 1 }"
            >
              {{ data3[index]["columns5"][i] }}
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="columns6">
            <InputNumber
              style="width: 50%;"
              size="large"
              :precision="0"
              :active-change="false"
              :min="0"
              :max="99999"
              v-model="data3[index].columns6"
              placeholder="可报销天数"
            ></InputNumber>
          </template>
        </Table>
      </cus-card>
      <cus-card title="就餐参数配置">
        <Table border :loading="form.loading" :columns="columns4" :data="data4">
          <template slot-scope="{ row, index }" slot="columns1">
            <InputNumber
              style="width: 50%;"
              size="large"
              :precision="2"
              :active-change="false"
              :min="0"
              :max="100"
              v-model="data4[index].columns1"
              placeholder="早餐（%）"
              @on-change="onChangeColumns1"
            ></InputNumber>
          </template>
          <template slot-scope="{ row, index }" slot="columns2">
            <InputNumber
              style="width: 50%;"
              size="large"
              :precision="2"
              :active-change="false"
              :min="0"
              :max="100"
              v-model="data4[index].columns2"
              placeholder="午餐（%）"
              @on-change="onChangeColumns2"
            ></InputNumber>
          </template>
          <template slot-scope="{ row, index }" slot="columns3">
            <InputNumber
              style="width: 50%;"
              size="large"
              :precision="2"
              :active-change="false"
              :min="0"
              :max="100"
              v-model="data4[index].columns3"
              placeholder="晚餐（%）"
              @on-change="onChangeColumns3"
            ></InputNumber>
          </template>
        </Table>
      </cus-card>
    </cus-card>
    <div style="display: flex;justify-content: flex-end; background: #ffffff">
      <cusButton class="mr_20 mb_20 mt_10" type="primary" @onClick="onOk"
        >&nbsp;&nbsp;保存&nbsp;&nbsp;</cusButton
      >
    </div>
    <Spin fix v-if="form.loading"></Spin>
  </div>
</template>

<script>
import { getDinnerConfig, updateDinnerConfig } from "@/api/business/business";
export default {
  name: "dinnerConfig",
  data() {
    return {
      form: {
        loading: false
      },
      columns1: [
        {
          title: " ",
          width: 100,
          key: "personnelType",
          align: "center"
        },
        {
          title: " ",
          width: 250,
          slot: "columns2",
          align: "center"
        },
        {
          title: "交伙标准",
          minWidth: 200,
          slot: "columns3",
          align: "center"
        },
        {
          title: "军粮差价补贴",
          minWidth: 200,
          slot: "columns4",
          align: "center"
        },
        {
          title: "总额",
          width: 100,
          slot: "columns5",
          align: "center"
        }
      ],
      columns2: [
        {
          title: " ",
          width: 100,
          key: "personnelType",
          align: "center"
        },
        {
          title: " ",
          width: 250,
          slot: "columns2",
          align: "center"
        },
        {
          title: "退伙标准",
          minWidth: 200,
          slot: "columns3",
          align: "center"
        },
        {
          title: "军粮差价补贴",
          minWidth: 200,
          slot: "columns4",
          align: "center"
        },
        {
          title: "伤病员专项标准",
          minWidth: 200,
          slot: "columns5",
          align: "center"
        },
        {
          title: "总额",
          width: 100,
          slot: "columns6",
          align: "center"
        }
      ],
      columns3: [
        {
          title: " ",
          width: 100,
          key: "personnelType",
          align: "center"
        },
        {
          title: " ",
          width: 250,
          slot: "columns2",
          align: "center"
        },
        {
          title: "客饭标准",
          minWidth: 200,
          slot: "columns3",
          align: "center"
        },
        {
          title: "过节补贴标准",
          minWidth: 200,
          slot: "columns4",
          align: "center"
        },
        {
          title: "总额",
          width: 100,
          slot: "columns5",
          align: "center"
        },
        {
          title: "可报销天数",
          minWidth: 200,
          slot: "columns6",
          align: "center"
        }
      ],
      columns4: [
        {
          title: "早餐（%）",
          width: 200,
          slot: "columns1",
          align: "center"
        },
        {
          title: "午餐（%）",
          width: 200,
          slot: "columns2",
          align: "center"
        },
        {
          title: "晚餐（%）",
          width: 200,
          slot: "columns3",
          align: "center"
        }
      ],
      data1: [],
      data2: [],
      data3: [],
      data4: [
        {
          columnsId: [],
          columns1: 0,
          columns2: 0,
          columns3: 0
        }
      ]
    };
  },
  mounted() {
    this.form.loading = true;
    this.getDinnerConfigApi();
  },
  methods: {
    // 输入框值切换
    onChange1() {
      this.data1 = this.data1.map(v => {
        v.columns5 = v.columns5.map((val, ind) => {
          val = (
            (v.columns3[ind] ? v.columns3[ind] : 0) +
            (v.columns4[ind] ? v.columns4[ind] : 0)
          ).toFixed(2);
          return val;
        });
        return v;
      });
    },
    onChange2() {
      this.data2 = this.data2.map(v => {
        v.columns6 = v.columns6.map((val, ind) => {
          val = (
            (v.columns3[ind] ? v.columns3[ind] : 0) +
            (v.columns4[ind] ? v.columns4[ind] : 0) +
            (v.columns5[ind] ? v.columns5[ind] : 0)
          ).toFixed(2);
          return val;
        });
        return v;
      });
    },
    onChange3() {
      this.data3 = this.data3.map(v => {
        v.columns5 = v.columns5.map((val, ind) => {
          val = (
            (v.columns3[ind] ? v.columns3[ind] : 0) +
            (v.columns4[ind] ? v.columns4[ind] : 0)
          ).toFixed(2);
          return val;
        });
        return v;
      });
    },
    onChangeColumns1() {
      this.data4 = this.data4.map(v => {
        // 如果两个有值,那么计算第三个值
        if (v.columns1 == 100) {
          v.columns2 = 0;
          v.columns3 = 0;
        } else if (v.columns1 && (v.columns2 || v.columns3)) {
          if (v.columns2) {
            if (v.columns1 + v.columns2 <= 100) {
              v.columns3 = parseFloat(100 - v.columns1 - v.columns2);
            } else {
              v.columns2 = parseFloat(100 - v.columns1);
              v.columns3 = 0;
            }
          } else if (v.columns3)
            if (v.columns1 + c.columns3 <= 100) {
              v.columns2 = parseFloat(100 - v.columns1 - v.columns3);
            } else {
              v.columns3 = parseFloat(100 - v.columns2);
              v.columns2 = 0;
            }
        } else {
          v.columns2 = v.columns3
            ? parseFloat(100 - v.columns1 - v.columns3)
            : parseFloat(100 - v.columns1);
        }
        return v;
      });
    },
    onChangeColumns2() {
      this.data4 = this.data4.map(v => {
        if (v.columns2 == 100) {
          v.columns1 = 0;
          v.columns3 = 0;
        } else if (v.columns2 && (v.columns1 || v.columns3)) {
          if (v.columns1) {
            if (v.columns2 + v.columns1 <= 100) {
              v.columns3 = parseFloat(100 - v.columns2 - v.columns1);
            } else {
              v.columns1 = parseFloat(100 - v.columns2);
              v.columns3 = 0;
            }
          } else if (v.columns3)
            if (v.columns2 + v.columns3 <= 100) {
              v.columns1 = parseFloat(100 - v.columns2 - v.columns3);
            } else {
              v.columns3 = parseFloat(100 - v.columns2);
              v.columns1 = 0;
            }
        } else {
          v.columns1 = v.columns3
            ? parseFloat(100 - v.columns3 - v.columns2)
            : parseFloat(100 - v.columns2);
        }
        return v;
      });
    },
    onChangeColumns3() {
      this.data4 = this.data4.map(v => {
        if (v.columns3 == 100) {
          v.columns1 = 0;
          v.columns2 = 0;
        } else if (v.columns3 && (v.columns1 || v.columns2)) {
          if (v.columns1) {
            if (v.columns1 + v.columns3 <= 100) {
              v.columns2 = parseFloat(100 - v.columns3 - v.columns1);
            } else {
              v.columns1 = parseFloat(100 - v.columns3);
              v.columns2 = 0;
            }
          } else if (v.columns2)
            if (v.columns2 + v.columns3 <= 100) {
              v.columns1 = parseFloat(100 - v.columns3 - v.columns1);
            } else {
              v.columns2 = parseFloat(100 - v.columns3);
              v.columns1 = 0;
            }
        } else {
          v.columns1 = v.columns2
            ? parseFloat(100 - v.columns3 - v.columns2)
            : parseFloat(100 - v.columns3);
        }
        return v;
      });
    },

    // 保存按钮
    onOk() {
      this.$cu
        .dialog({ content: "确认保存该数据?", title: "提示" })
        .then(() => {
          this.form.loading = true;
          this.updateDinnerConfigApi();
        });
    },
    // 获取就餐配置
    getDinnerConfigApi() {
      return new Promise((resolve, reject) => {
        getDinnerConfig({}).then(res => {
          this.form.loading = false;
          let data1 = [];
          let data2 = [];
          let data3 = [];
          if (res.errorcode === 0) {
            res.foodSettingList.forEach(v => {
              if (v.settingType === 1) {
                let index = data1.findIndex(
                  val => val.personnelType === v.personnelType
                );
                if (index != -1) {
                  data1[index]["columnsId"].push(v.id ? v.id : 0);
                  data1[index]["columns2"].push(v.subject ? v.subject : 0);
                  data1[index]["columns3"].push(v.standard ? v.standard : 0);
                  data1[index]["columns4"].push(
                    v.differentialSubsidy ? v.differentialSubsidy : 0
                  );
                  data1[index]["columns5"].push(v.total ? v.total : 0);
                } else {
                  data1.push({
                    ...v,
                    columnsId: [v.id ? v.id : ""],
                    columns2: [v.subject ? v.subject : 0],
                    columns3: [v.standard ? v.standard : 0],
                    columns4: [
                      v.differentialSubsidy ? v.differentialSubsidy : 0
                    ],
                    columns5: [v.total ? v.total : 0]
                  });
                }
              } else if (v.settingType === 2) {
                let index = data2.findIndex(
                  val => val.personnelType === v.personnelType
                );
                if (index != -1) {
                  data2[index]["columnsId"].push(v.id ? v.id : 0);
                  data2[index]["columns2"].push(v.subject ? v.subject : 0);
                  data2[index]["columns3"].push(v.standard ? v.standard : 0);
                  data2[index]["columns4"].push(
                    v.differentialSubsidy ? v.differentialSubsidy : 0
                  );
                  data2[index]["columns5"].push(
                    v.sickPersonnelStandard ? v.sickPersonnelStandard : 0
                  );
                  data2[index]["columns6"].push(v.total ? v.total : 0);
                } else {
                  data2.push({
                    ...v,
                    columnsId: [v.id ? v.id : ""],
                    columns2: [v.subject ? v.subject : 0],
                    columns3: [v.standard ? v.standard : 0],
                    columns4: [
                      v.differentialSubsidy ? v.differentialSubsidy : 0
                    ],
                    columns5: [
                      v.sickPersonnelStandard ? v.sickPersonnelStandard : 0
                    ],
                    columns6: [v.total ? v.total : 0]
                  });
                }
              } else if (v.settingType === 3) {
                let index = data3.findIndex(
                  val => val.personnelType === v.personnelType
                );
                if (index != -1) {
                  data3[index]["columnsId"].push(v.id ? v.id : 0);
                  data3[index]["columns2"].push(v.subject ? v.subject : 0);
                  data3[index]["columns3"].push(v.standard ? v.standard : 0);
                  data3[index]["columns4"].push(
                    v.holidaySubsidyStandard ? v.holidaySubsidyStandard : 0
                  );
                  data3[index]["columns5"].push(v.total ? v.total : 0);
                  data3[index]["columns6"] = v.days ? v.days : 0;
                } else {
                  data3.push({
                    ...v,
                    columnsId: [v.id ? v.id : ""],
                    columns2: [v.subject ? v.subject : 0],
                    columns3: [v.standard ? v.standard : 0],
                    columns4: [
                      v.holidaySubsidyStandard ? v.holidaySubsidyStandard : 0
                    ],
                    columns5: [v.total ? v.total : 0],
                    columns6: v.days ? v.days : 0
                  });
                }
              } else if (v.settingType === 4) {
                this.data4[0].columnsId = this.data4[0].columnsId
                  ? this.data4[0].columnsId
                  : [];
                this.data4[0].columnsId.push({ id: v.id, subject: v.subject });
                if (v.subject == "早餐（%）") {
                  this.data4[0]["columns1"] = v.breakfast;
                } else if (v.subject == "午餐（%）") {
                  this.data4[0]["columns2"] = v.lunch;
                } else if (v.subject == "晚餐（%）") {
                  this.data4[0]["columns3"] = v.dinner;
                }
              }
            });
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;
            resolve();
          }
        });
      });
    },
    // 更新就餐配置
    updateDinnerConfigApi() {
      return new Promise((resolve, reject) => {
        let basFoodSettingList = [];

        this.data1.forEach(v => {
          v.columnsId.forEach((val, ind) => {
            basFoodSettingList.push({
              ...v,
              id: val,
              subject: v.columns2[ind],
              standard: v.columns3[ind],
              differentialSubsidy: v.columns4[ind],
              total: v.columns5[ind]
            });
          });
        });
        this.data2.forEach(v => {
          v.columnsId.forEach((val, ind) => {
            basFoodSettingList.push({
              ...v,
              id: val,
              subject: v.columns2[ind],
              standard: v.columns3[ind],
              differentialSubsidy: v.columns4[ind],
              sickPersonnelStandard: v.columns5[ind],
              total: v.columns6[ind]
            });
          });
        });
        this.data3.forEach(v => {
          v.columnsId.forEach((val, ind) => {
            basFoodSettingList.push({
              ...v,
              id: val,
              subject: v.columns2[ind],
              standard: v.columns3[ind],
              holidaySubsidyStandard: v.columns4[ind],
              total: v.columns5[ind],
              days: v.columns6
            });
          });
        });
        this.data4.forEach(v => {
          v.columnsId.forEach((val, ind) => {
            if (val.subject == "早餐（%）") {
              basFoodSettingList.push({
                id: val.id,
                breakfast: this.data4[0].columns1
              });
            } else if (val.subject == "午餐（%）") {
              basFoodSettingList.push({
                id: val.id,
                lunch: this.data4[0].columns2
              });
            } else if (val.subject == "晚餐（%）") {
              basFoodSettingList.push({
                id: val.id,
                dinner: this.data4[0].columns3
              });
            }
          });
        });
        basFoodSettingList.push({
          breakfast: this.data4[0].columns1,
          lunch: this.data4[0].columns2,
          dinner: this.data4[0].columns3
        });

        updateDinnerConfig({
          basFoodSettingList: JSON.stringify(basFoodSettingList)
        })
          .then(res => {
            this.form.loading = false;
            if (res.errorcode === 0) {
              this.$Message.success("编辑成功");
              this.getDinnerConfigApi();
            }
          })
          .catch(err => {
            this.loading = false;
          });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.dinnerConfig {
  position: relative;
  height: 100%;
  overflow: auto;
  &-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }
}
.borderBottom {
  border-bottom: 1px solid #e3e8ee;
}
</style>
